iframe相关常用属性与方法

1.onload(非IE)
iframe加载完成之后调用,所以常用来判断iframe加载完成。

2.onreadystatechange(IE)
此事件在iframe变化的时候都会触发，iframe加载过程至完成共触发3次
reayState有3种状态，分别是:loading –> interactiver –> complete.

4.window属性
每个iframe都有包裹它的window，而这个window是top window的子窗口.

// index.html
<iframe src="http://test.demo.lkj.com/search/page/login" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="300" height="300" id="login-iframe" class=""></iframe>
<script type="text/javascript">
	window.name = 'index';
</script>

// login.html
<script type="text/javascript">
    if ($.cookie.get('loginCode')) {
    	console.log(window.name,window);
    	console.log(window.top.name,window.top);
    }
    else{
    	$.cookie.set('loginCode', '1', {expires: 1000* 60 * 60 * 2});
	    window.name='login';
	    setTimeout(function(){
	    	window.name='loginrefresh';
	    	location.reload();
	    },1000);
	    console.log(window.name,window);
    	console.log(window.top.name,window.top);
    }
</script>

图如下：

分析：
内嵌iframe拥有window属性，内嵌iframe是top window的子窗口。iframe刷新后，其top属性不变。

3.name属性
作用：iframe的name属性配合a/form标签的target属性能实现页面局部刷新。
3.1.局部刷新
a标签点击后返回的页面显示到iframe里

// index.html
<a href="http://www.ifeng.com/" target="_blank">打开新窗口</a>
<a href="http://www.ifeng.com/" target="login-iframe">局部刷新</a>
<iframe src="http://test.demo.lkj.com/search/page/login" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no"  width="300" height="300" name="login-iframe" id="testEl"></iframe>

// login.html
<p>hello 我是嵌套login页面</p>
<script type="text/javascript">
    setInterval(function(){
    	console.log('我是嵌套login页面');
    },1000);
</script>

点击按钮【局部刷新】图如下：

分析：
iframe嵌套页面地址被替换成a标签的地址。所以控制台不再执行login.html里的输出。
form表单无刷新提交

<form target="login-iframe" method="get" action="http://search.ifeng.com/sofeng/search.action" target="_blank">
    <input id="keyword" type="text" name="q" value="">
    <input name="" type="submit" id="btnSearch1" class="btn01" value="提交">
</form>
<iframe src="http://test.demo.lkj.com/search/page/login" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no"  width="3000" height="300" name="login-iframe" id="testEl"></iframe>

图如下：

分析：form表单返回的页面在iframe中显示。
利用此可以实现表单无刷新提交。
跨域情况下：form表单提交到跨域接口，页面监听iframe的刷新来判断是否提交成功。但是跨域拿不到返回值。
3.2.iframe的name属性值即是iframe中window.name属性值

// index.html
<iframe src="http://test.demo.lkj.com/search/page/login" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="300" height="300" name="login-iframe" id="testEl"></iframe>

<script type="text/javascript">
	window.name = 'index';
    setTimeout(function(){
    	document.getElementById('testEl').name = 'loginrefresh';
    	document.getElementById('testEl').contentWindow.location.reload();
    },1000);
</script>

// login.html 

<script type="text/javascript">
    console.log(window.name,'window');
	console.log(window.top.name,window.top);
</script>

图如下:

修改iframe name属性未触发window.name对象改变

// index.html
<iframe src="http://test.demo.lkj.com/search/page/login" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="300" height="300" name="login-iframe" id="testEl"></iframe>

<script type="text/javascript">
	window.name = 'index';
    setTimeout(function(){
    	$('#testEl').remove();
    	var iframe = document.createElement('iframe');
    	iframe.name = 'loginrefresh';
    	iframe.src = 'http://test.demo.lkj.com/search/page/login';
    	document.body.append(iframe);
    },1000);
</script>

// login.html
<script type="text/javascript">
    console.log(window.name,'window');
	console.log(window.top.name,window.top);
</script>

图如下：

触发window对象改变